<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/base.css ">
    <link rel="stylesheet" href="css/reset.css ">
    <title>图书细节</title>
</head>
<body>
<header class="base-header">
    <section class="topbar">
        <div class="container">
            <div class="login">
                <span><a href="#" class="loginbtn">登 录</a></span>
                <span><a href="#" class="loleft">注 册</a></span>
            </div>
            <div class="cart">
                <a href="#" class="cartbtnleft ">
                    <span class="count">2</span>
                    <span class="chrs"> 购 物 车</span>
                </a>
                <a href="#"  class="cartbtnmore"></a>
            </div>
        </div>
    </section>
    <section class="logosearch">
        <div class="container">
            <h1 class="logo">
                <a href="#">图书馆—首页</a>
            </h1>
            <div class="search">
                <input class="inputsearch" type="text " placeholder="请输入关键字" >
                <button class="searchbtn">
                    <span class="srearchicon"></span>
                </button>
            </div>

        </div>
    </section>
    <nav>
        <div class="menu">
            <div class="container">
                <ul class="menulist">
                    <li class="current"><a href="#">图书</a></li>
                    <li><a href="#">电子书</a></li>
                    <li><a href="#">有声读物</a></li>
                    <li><a href="#">DVD</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">礼品</a></li>
                </ul>
            </div>
        </div>
        <div class="submenu">
            <div class="container">
                <ul class="submenulist">
                    <li><a href="#">小说</a></li>
                    <li><a href="#">非小说</a></li>
                    <li><a href="#">儿童读物</a></li>
                    <li><a href="#">流行</a></li>
                    <li><a href="#">畅销榜</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section class="index-detail">
    <div class="container">
        <div class="besttop">
            <h3>
                <span>首页</span><span>  >   小说</span><span>>    经典小说</span>
            </h3>
            <div class="topbtn">
                <div class="left">
                    <a href="#" class="img">
                        <img src="images/newl.png " alt="">
                    </a>
                    <a href="#" class="button">
                        <span class="icon"></span>
                        <span class="bt">Save To My Library / lists <span></span></span>
                    </a>
                </div>
                <div class="right">
                    <span class="oldprice">RRP $16.99</span>
                    <span class="nowprice">$13.50</span>
                    <span class="off">
                        <span class="percent">20%</span>
                        <span class="offchr">OFF</span>
                    </span>
                    <a href="#" class="button">
                        <span class="left1">Buy Now</span>
                        <span class="icon"></span>
                    </a>
                    <a href="#" class="days">
                        <span class="icon"></span>
                        <span class="lefto">In Stock | 2-4 Days <span></span></span>
                    </a>
                </div>
                <div class="middle">
                    <h1 class="title">Harry Potter and the Philosopher's Stone Hufflepuff Edition <span class="ic"></span></h1>
                    <span class="edition" >20th Anniversary House Editions</span>
                    <span class="author" >by<a href="#"> J.K.Rowling<span class="ico"></span></a></span>
                    <ul class="date">
                        <li>Paperback / softback</li>
                        <li>Publication Date:01/06/2017</li>
                    </ul>
                    <span class="review"><a href="#"><ul class="i">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        </ul> Be the first to write a review</a></span>
                </div>

            </div>
        </div>

        <div class="bestbottom">
            <ul class="menulist">
                <li class="current"><a href="#">Synopsis</a></li>
                <li><a href="#">Product Details</a></li>
                <li><a href="#">About the Author</a></li>
                <li><a href="#">Shipping</a></li>
            </ul>
            <div class="syn">
                <p class="title">Celebrate 20 years of Harry Potter magic with four special editions of <span>Harry Potter and the Philosopher's Stone.</span></p>
                <p>Gryffindor, Slytherin,Hufflepuff, Ravenclaw ...</p>
                <p>Twenty years ago these magical words and many more flowed from a young writer's pen, an orphan called Harry Potter was freed from the cupboard under the stair and a global phenomenon started. <span>Harry Potter and the Philosopher's Stone</span> has been read and loved byevery new generation since.</p>
                <p>To mark the 20th anniversary of first publication, Bloomsbry is publishing four House Editions of J.K.Rowling's modern classic. These stuning editions will each feature the individual house crest on the jacket and line illustrations exclusive to that house, by Kate Greenaway Medal winner Levi Pinfold.</p>
                <p>Exciting new extra content will include fact files and profiles of favourite characters, and each book will have sprayed edges in the house colours.</p>
                <p>Available for a limited period only, these highly collectable editions will be a must-have for all Harry Potter fans in 2017.</p>
            </div>
        </div>
    </div>
</section>
<section class="index-recomd">
    <div class="container">
        <div class="recomdtop">
            <h2>Customer Reviews</h2>
            <div class="mid">
                <span>Be the first to review Harry Potter and the Philosopher's Stone Hufflepuff Edition .</span>
                <ul class="love">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <a href="#" class="rig">
                    <span class="left1">Add a Review</span>
                    <span class="icon"></span>
                </a>
            </div>
            <div class="vie">
                <ul>
                    <li class="le" >Recently Viewed</li>
                    <a href="#" class="rig">Manage recently viewed items ></a>
                </ul>
            </div>
        </div>
        <div class="recomdbtn">
            <ul class="newlist">
                <li class="post">
                    <a href="#" class="img">
                        <img src="images/new2.png" alt="">
                    </a>
                    <span class="title">The Late Show</span>
                    <span class="author">by Michael Connelly</span>
                    <span class="data"><span class="zone"><span class="icon"></span>&nbsp;   In Stock | 2-4 Days</span></span>
                    <span class="cover">Paperback / softback</span>
                    <span class="oldprice">RRP $32.99</span>
                    <span class="nowprice">$22.99</span>
                    <span class="off">
                              <span class="percent">30%</span>
                              <span class="offchr">OFF</span>
                          </span>
                    <a href="#" class="button">
                        <span class="left">Buy Now</span>
                        <span class="icon"></span>
                    </a>
                </li>
                <li class="post">
                    <a href="#" class="img">
                        <img src="images/new3.png" alt="">
                    </a>
                    <span class="title">Colombiano</span>
                    <span class="author">by Rustly Young</span>
                    <span class="data"><span class="zone"><span class="icon"></span>&nbsp;   In Stock | 2-4 Days</span></span>
                    <span class="cover">Paperback / softback</span>
                    <span class="oldprice">RRP $32.99</span>
                    <span class="nowprice">$25.99</span>
                    <span class="off">
                              <span class="percent">21%</span>
                              <span class="offchr">OFF</span>
                          </span>
                    <a href="#" class="button">
                        <span class="left">Buy Now</span>
                        <span class="icon"></span>
                    </a>
                </li>
                <li class="post">
                    <a href="#" class="img">
                        <img src="images/new4.png" alt="">
                    </a>
                    <span class="title">Of Mice and Men</span>
                    <span class="author">by John Steinbeck</span>
                    <span class="data"><span class="zone"><span class="icon"></span>&nbsp;   In Stock | 2-4 Days</span></span>
                    <span class="cover">CD-Audio</span>
                    <span class="oldprice">RRP $39.99</span>
                    <span class="nowprice">$24.06</span>
                    <span class="off">
                              <span class="percent">39%</span>
                              <span class="offchr">OFF</span>
                          </span>
                    <a href="#" class="button">
                        <span class="left">Buy Now</span>
                        <span class="icon"></span>
                    </a>
                </li>
                <li class="post">
                    <a href="#" class="img">
                        <img src="images/new5.png " alt="">
                    </a>
                    <span class="title">Charlie and the Karaoke Cockroaches</span>
                    <span class="author">by Alan Brough</span>
                    <span class="data"><span class="zone"><span class="icon"></span>&nbsp;   In Stock | 2-4 Days</span></span>
                    <span class="cover">Paperback / softback</span>
                    <span class="oldprice">RRP $14.99</span>
                    <span class="nowprice">$12.74</span>
                    <span class="off">
                              <span class="percent">15%</span>
                              <span class="offchr">OFF</span>
                          </span>
                    <a href="#" class="button">
                        <span class="left">Buy Now</span>
                        <span class="icon"></span>
                    </a>
                </li>
            </ul>
            <div class="recomdbottom">
                <h3>You Can find this item in:</h3>
                <a href=""><span>Fantasy & magical realism (Children's / Teenage)</span></a>
                <a href=""><span>General fiction (Children's / Teenage)</span></a>
                <a href=""><span>Harry Potter</span></a>
                <a href=""><span>Harry Potter House editions</span></a>
                <a href=""><span>Harry Potter House editions</span></a>
            </div>
        </div>
    </div>
</section>
<footer class="base-footer">
    <div class="footertop">
        <div class="container">
            <div class="left">
                <div class="help">
                    <h3><span class="ic"></span>帮助</h3>
                    <ul class="helplist">
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">物流信息</a></li>
                        <li><a href="#">退货政策</a></li>
                        <li><a href="#">意见反馈</a></li>
                    </ul>
                </div>
                <div class="tel">
                    <ul class="tellist">
                        <li><a href="#"><span class="tele"></span>400-111-0000</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <ul class="footernavtoplist">
                    <li>
                        <h3>关于我们</h3>
                        <ul>
                            <li><a href="#">公司历史</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">媒体关注</a></li>
                            <li><a href="#">合作伙伴</a></li>
                            <li><a href="#">移动站点</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3>关注我们</h3>
                        <ul>
                            <li><a href="#">公司历史</a></li>
                            <li><a href="#">报纸媒体</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">YouTube</a></li>
                            <li><a href="#">Twitter</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="footernavbtmlist">
                    <li>
                        <h3>社交网络</h3>
                        <ul class="social ibp">
                            <li class="fb"><a href="#"></a></li>
                            <li class="yt"><a href="#"></a></li>
                            <li class="twitter"><a href="#"></a></li>
                            <li class="wb"><a href="#"></a></li>
                            <li class="qq" ><a href="#"></a></li>
                            <li class="gp" ><a href="#"></a></li>
                        </ul>
                    </li>
                    <li >
                        <h3>支付方式</h3>
                        <ul class="payment ibp" >
                            <li class="visa" ><a href="#"></a></li>
                            <li class="master" ><a href="#"></a></li>
                            <li class="qpay" ><a href="#"></a></li>
                            <li class="wepay" ><a href="#"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footerbottom">
        <div class="container">
            <div class="footerbtmleft"></div>
            <div class="copyright">
                版权所有  2017.<br>
                <a href="#">隐私政策</a>&nbsp;     |
                <a href="#">&nbsp;   使用条款</a>&nbsp;    |
                <a href="">&nbsp;   内容政策</a>

            </div>
        </div>
    </div>
</footer>
</body>
</html>